let Utils = require("../../framework/js/utils");

require("./ui_6/cascade");
require("./ui_6/select");
require("./ui_6/native");

module.exports = {
    template: `
        <div class="anu-subpage" style="width: 100%;">         
              
<h5>原谅select</h5>              
<div class="blur_bg">
    <label>
        <select>
          <option value="1">TODOS</option>
          <option value="2">Algunos</option>
          <option value="3">Otros más largos</option>
        </select>
    </label>
</div>        

<h5>原生select</h5>
<aui-native-select>
<option value="1">TODOS</option>
<option value="2">Algunos</option>
<option value="3">Otros más largos</option>
</aui-native-select>

<h5>级联select</h5>
<aui-cascade-select ref="select1" @change="onSelect1Change"></aui-cascade-select>

<h5>单级select</h5>
<aui-single-select ref="select2" @change="onSelect2Change"></aui-single-select>

        </div>
    `,
    data() {
        var ret = {};
        ret.options = [{
            value: '',
            label: '全部'
        }];
        ret.formFields = window.AUI.Utils.defineFormRules({
            "v1":  "v1"
        });
        ret.form = window.AUI.Validator.genForm(ret.formFields, _.keys(ret.formFields));
        return ret;
    },
    mounted() {
        var self = this;
        self.$refs.select1.setOptions([
            {
                label: "Action",
                value: 0
            },
            {
                label: "Another action",
                value: 1
            },
            {
                label: "Something else here",
                value: 2
            },
            {
                label: "Action",
                value: 3
            },
            {
                label: "Another action",
                value: 4
            },
            {
                label: "Something else here",
                value: 5
            }
        ]);
        self.$refs.select1.setHandleMethods(function (level, sublevel, option, optionindex) {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    if (level == 0) {
                        if (option.value == 0) {
                            resolve([
                                {
                                    label: "Action 1-1",
                                    value: 0
                                },
                                {
                                    label: "Action 1-2",
                                    value: 1
                                },
                                {
                                    label: "Action 1-3",
                                    value: 2
                                }
                            ])
                        }
                        if (option.value == 3) {
                            resolve([
                                {
                                    label: "Action 2-1",
                                    value: 0
                                }
                            ])
                        }
                    }
                    if (level == 1) {
                        if (option.value == 0) {
                            resolve([
                                {
                                    label: "Action 3-1",
                                    value: 0
                                }
                            ])
                        }
                    }
                    resolve([{
                        label: "暂无数据",
                        value: window.AUI.EMPTY
                    }]);
                }, 1000);
            })
        });

        self.$refs.select2.setOptions([
            {
                label: "Action",
                value: 0
            },
            {
                label: "Another action",
                value: 1
            },
            {
                label: "Something else here",
                value: 2
            },
            {
                label: "Action",
                value: 3
            },
            {
                label: "Another action",
                value: 4
            },
            {
                label: "Something else here",
                value: 5
            }
        ]);
        rootcontroller.getPage(self).attachChildComponentReady();
    },
    methods: {
        service() {
        },
        onSelect1Change(value, options) {
            console.log('-------------------');
            console.log(options);
            console.log('-------------------');
        },
        onSelect2Change(value) {
            console.log('-------------------');
            console.log(value);
            console.log('-------------------');
        },
        onError(e) {
            console.log('-------------------');
            console.log(e);
            console.log('-------------------');
        }
    }
};